<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>江苏智慧人社</title>
{{--	<link href="{{URL::asset('css/bootstrap.min.css')}}" rel="stylesheet">--}}
	<!--图标样式-->
	<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet">

	<!--主要样式-->

	<link href="{{URL::asset('css/slidercaptcha.css')}}" rel="stylesheet" />
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}


	.sliderModel {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		display: none;

	}
	.sliderModel .cont{padding: 20px; width: 480px; background: #fff;border-radius: 6px;margin: 0 auto;margin-top: 150px;}
	.showMessage {
		text-align: center;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}

	#canvas_wrap{
		/*width: 280px;*/
		margin: 0 auto;
		/*border: 1px solid red;*/
	}
	#canvas_wrap canvas{
		display: block;
	}

</style>
<body>
<div class="sliderModel">
	<div class="cont">
		<div id="canvas_wrap"></div>
		<div class="showMessage"></div>
	</div>
</div>


<div  class="box" style="display: none"><img src="{{$url}}"></img></div>

{{--<div  class="box" style="display: none"><img src="storage/uploads/20200330/zzr.png"></img></div>--}}
<script src="{{URL::asset('js/jquery.min.js')}}" type="text/javascript"></script>
<script src="{{URL::asset('js/newSlider.js')}}"></script>
<script>

	function showMessage(msg,color){
		var showMessage = document.querySelector('.showMessage');
		showMessage.innerHTML=msg;
		showMessage.style.color=color;
	}
	var obj={
		el:'#canvas_wrap',
		w:355,
		h:150,
		imgArr:['http://www.menwu.cn/img/1.jpg','http://www.menwu.cn/img/2.jpg','http://www.menwu.cn/img/3.jpg','http://www.menwu.cn/img/4.jpg'],
		// sliderIcon:'http://www.menwu.cn/img/1.jpg',
		refresh:function(){
			showMessage('','#333')
		},
		finish:function(e){
			if(e){
				$(".box").show();
				$(".sliderModel").hide()
			}else{
				showMessage('验证失败,请重试','red');
			}

		}
	}


	document.querySelector('.sliderModel').style.display="block";
	new window.$newSlider(obj);

	$(".sliderModel .cont").width(355)
	$("#canvas_wrap").width(355)
</script>


<style>
*{padding:0;margin:0;}

img{
      display: block;
      width: 120%;
      margin-left: -30px;
}
.box{
      width: 100%;

}
/*#captcha{margin: 0 !important;}*/
/*.container-fluid{margin-top: 150px;}*/
</style>
</body>
</html>

